<template>
  <div>
    <!-- 选项卡 
      tab：label导航内容
           index=''  当前导航栏标识
      tabs：currentIndex=''  选中的第几个导航栏
            @changeTab='changeTab'   接收点击的li标识index
      -->
    <Tabs :currentIndex="currentIndex" @changeTab="changeTab">
      <Tab label="中国疫情" index="1">
        <div id="main"></div>
      </Tab>
      <Tab label="世界疫情" index="2">
        <div id="world"></div>
      </Tab>
    </Tabs>
    <!-- <h2>中国地图</h2>
    <div id="main"></div>
    <h2>世界地图</h2>
    <div id="world"></div> -->
  </div>
</template>

<script>
import Tabs from "../../components/tabs/Tabs.vue";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name: "CovidMap",
  components: { Tabs },
  // 定义属性
  data() {
    return {
      currentIndex: 1,
    };
  },
  methods: {
    changeTab(val) {
      this.currentIndex = val;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this);
    //==================绘制中国地图==================
    //地图数据结构： [{name:'',value:''}]
    // this.$echarts.chinaMap("main");
    // 请求数据
    this.$api.chinaMap().then((res) => {
      console.log(res.data);
      // 数据处理
      let chinaArr = []; //装地图数据
      res.data.retdata.forEach((element) => {
        //forEach遍历数组每一项，也就是这里的类
        //xArea: "西藏"   curConfirm: "0"
        let temp = {};
        temp.name = element.xArea;
        temp.value = element.curConfirm;
        chinaArr.push(temp);
      });
      // console.log(chinaArr);
      // 插到地图上
      this.$echarts.chinaMap("main", chinaArr);
    });

    //==================绘制国外地图===================
    this.$api.getWorldMap().then((res) => {
      console.log(res.data.retdata);
      let arr = []; //装地图数据
      res.data.retdata.forEach((element) => {
        //forEach遍历数组每一项，也就是这里的类
        //xArea: "美国"   curConfirm: "1000000"
        let temp = {};
        temp.name = element.xArea;
        temp.value = element.curConfirm;
        arr.push(temp);
      });
      // 插入地图
      this.$echarts.worldMap("world", arr);
      console.log(arr);
    });
  },
};
</script>

<style scoped>
#main,
#world {
  height: 8rem;
  width: 7rem;
}
</style>
